<template>
    <div>
        <Modal v-model="value" :mask-closable='false' :closable="false" :width="960" >
            <Spin fix size="large" v-if="submitLoading">
                <slot name="loading"/>
            </Spin>
            <Form ref="searchForm" inline :label-width="85">
                <Form-item label="人员账号" prop="userNameCondition">
                    <Input type="text" v-model="userNameCondition" clearable placeholder="请输入人员账号"
                           style="width: 150px"/>
                </Form-item>
                <Form-item label="在岗状态" prop="postStatusCondition">
                    <Select v-model="postStatusCondition" clearable placeholder="请选择在岗状态"
                            style="width: 150px">
                        <Option value="1">在岗</Option>
                        <Option value="0">离岗</Option>
                    </Select>
                </Form-item>
                <Form-item>
                    <Button type="primary" @click="search">查询</Button>
                </Form-item>
            </Form>
            <Table :columns="columns" :data="dataList" border ref="taskHandlerGroup" :height="400"
                   closeable="false " :loading="loading">
                <template slot-scope="{row}" slot="action">
                    <Button type="primary" @click="changeHandler(row)" v-if="operationType == operationTypeConst.change.val">改派</Button>
                    <Button type="primary" @click="appointHandler(row)" v-if="operationType == operationTypeConst.appoint.val">指定</Button>
                </template>
                <template slot-scope="{row}" slot="postStatus">
                    <i-switch :value="row.postStatus" size="large" true-color="green" false-color="orange" true-value="1" false-value="0" :disabled="true" >
                        <span slot="open">在岗</span>
                        <span slot="close">离岗</span>
                    </i-switch>
                </template>
            </Table>
            <Page :total="total" show-elevator :style="{textAlign:'right',marginTop:'10px'}"
                @on-change="changePage" show-total />
            <div slot="header">
                <h2> {{currentOperationType.title}}</h2>
            </div>
            <div slot="footer">
                <Button type="primary" @click="cancel" ghost>关闭</Button>
            </div>
        </Modal>
        <Span v-if="queryFlag"/>
    </div>
</template>

<script>
    import {appointFlow, changeTaskHandler, listTaskHandler} from "../../../../api/afs-case/approve/approveTask";

    export default {
        name: "task-handler",
        props: {
            value: {
                type: [Boolean, String],
                default: false
            },
            taskNodeIdProp: {
                type: [String],
                default: ''
            },
            operationType:{
                type:[String,Number],
                default: "1"
            },
            stageId: "",
            taskOriUserName: "",
            applyNo:""
        },
        data() {
            return {
                loading: false,
                dataList: [],
                columns: [
                    {
                        title: "人员账号",
                        key: "staffName",
                        minWidth: 100,
                        align: "center"
                    },
                    {
                        title: "人员姓名",
                        key: "staffRealName",
                        minWidth: 100,
                        align: "center"
                    },
                    {
                        title: "在岗状态",
                        key: "postStatus",
                        minWidth: 100,
                        slot: "postStatus",
                        align: "center"
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 80,
                        align: "center",
                        fixed: "right",
                        slot: "action",
                        className: 'select-table-info-column'
                    }
                ],
                userNameCondition: "",
                postStatusCondition: "",
                currentUserName:"",
                currentStatus:"",
                submitLoading: false,
                dataTotal: 0,
                queryResult: {
                    pageList: [],
                    allDataList: [],
                    dataTotal: 0
                },
                total:0,
                pageSize: 10,
                operationTypeConst:{
                    change:{
                        val:"1",
                        title:"任务改派"
                    },
                    appoint:{
                        val:"2",
                        title:"指定处理人"
                    }
                },
                currentOperationType:{}
            }
        },
        methods: {
            cancel() {
                this.$emit("cancel");
            },
            listByDepartment() {
                this.loading = true;
                listTaskHandler().then(res => {
                    if (res.code == "0000") {
                        this.queryResult = res.data;
                        this.changePage(1);
                    }
                }).finally(() => {
                    this.loading = false;
                })
            },
            changeHandler(row) {
                if(this.taskOriUserName==row.staffName){
                    this.$Message.warning("不可将任务指派给原处理人.");
                    return;
                }
                //  任务改派时审批组员不可将任务改派给离岗人员
                if(this.operationType == this.operationTypeConst.change.val
                    && this.$store.state.user.roles.includes("ROLE_APPROVER")
                    && this.$store.state.user.roles.length == 1
                    && row.postStatus=="0"){
                    this.$Message.warning("不可将任务指派给离岗人员.");
                    return;
                }
                this.$Modal.confirm({
                    title: "任务改派",
                    content: `确认将任务改派给<span style='font-weight: bolder'> ${row.staffRealName} </span> ?`,
                    onOk: () => {
                        this.submitLoading = true;
                        changeTaskHandler({
                            userName: row.staffName,
                            userRealName: row.staffRealName,
                            stageId: this.stageId,
                            oriUserName: this.taskOriUserName
                        }).then(res => {
                            if(res.code = "0000") {
                                this.$Message.info("操作成功");
                                this.$emit("afterSubmit", row);
                            }
                        }).finally(()=>{
                            this.submitLoading = false;
                        });
                    }
                })
            },
            appointHandler(row){
                this.$Modal.confirm({
                    title: this.applyNo + " 指定处理人",
                    content: `确认对<span style='font-weight: bolder'> ${row.staffRealName} </span>发起指定处理人流程?`,
                    onOk: () => {
                        this.submitLoading = true;
                        appointFlow({
                            applyNo: this.applyNo,
                            appointStaff: row.staffName
                        }).then(res => {
                            if (res.code = "0000") {
                                this.$Message.info("操作成功");
                                this.$emit("afterSubmit", row);
                            }
                        }).finally(() => {
                            this.submitLoading = false;
                        })
                    }
                })
            },
            search(){
                this.currentUserName = this.userNameCondition;
                this.currentStatus = this.postStatusCondition;
                this.changePage(1);
            },
            changePage(currentPageIndex){
                if(!(this.userNameCondition || this.postStatusCondition)){
                    this.dataList = this.queryResult.pageList[currentPageIndex-1];
                    this.total = this.queryResult.dataTotal;
                }else{
                    let userDataList = [];
                    this.queryResult.allDataList.forEach( data =>{
                        if(this.currentUserName && this.currentStatus){
                            if(data.staffName.indexOf(this.currentUserName)>=0 && data.postStatus == this.currentStatus){
                                userDataList.push(data);
                            }
                            if (data.staffRealName.indexOf(this.currentUserName)>=0 && data.postStatus == this.currentStatus){
                                userDataList.push(data)
                            }
                        }else if(this.currentUserName){
                            if(data.staffName.indexOf(this.currentUserName)>=0){
                                userDataList.push(data);
                            }
                            if (data.staffRealName.indexOf(this.currentUserName)>=0){
                                userDataList.push(data)
                            }
                        }else if(this.currentStatus){
                            if(data.postStatus == this.currentStatus){
                                userDataList.push(data);
                            }
                        }
                    })
                    this.total = userDataList.length;
                    let startIndex = (currentPageIndex-1) * this.pageSize;
                    let endIndex = (currentPageIndex) * this.pageSize;
                    this.dataList = [];
                    for (let i = startIndex; i < userDataList.length && i < endIndex; i++) {
                        this.dataList.push(userDataList[i]);
                    }
                }
            },
            resetSearchForm(){
                this.userNameCondition = "";
                this.postStatusCondition = "";
            }
        },
        computed: {
            queryFlag: function () {
                if (this.value) {
                    this.dataList = [];
                    this.resetSearchForm();
                    this.listByDepartment();
                }
                if (this.operationType == this.operationTypeConst.change.val) {
                    this.currentOperationType = this.operationTypeConst.change;
                } else if (this.operationType == this.operationTypeConst.appoint.val) {
                    this.currentOperationType = this.operationTypeConst.appoint;
                }
                return this.value == true;
            },
        },
    }
</script>

<style scoped>

</style>
